<!--
用法：<qm-file-upload :params="{type:'avatar',dataKey:'xxxId'}" ref="picture"></f7-picture-upload>
 -->
<template id="qm-file-upload">
    <f7-list class="pic_upload">
        <template v-if="!disabled">
            <span class="legend" v-if="showLegend.show" @click="openLegendFile(showLegend.id)">
                <img :src="getDownTem(showLegend.id)" alt="">
                <div>图例</div>
            </span>
            <span class="pic-span" v-for="(file, index) in dbImgList" :key="file.attachmentId" :title="file.fileName">
                <div :class="
                    hasHeightLight(file.attachmentId) == true
                        ? 'img-div img-heightLight'
                        : 'img-div'
                ">
                    <img class="img-attachement" :src="getFileThumb(file)" @click="openFile(file, index)" />
                </div>
                <div v-if="file.code" style="font-size: 12px">{{ file.code }}</div>
                <div class="img-index" @click="openFile(file, index)" v-if="showIndex == true">
                    <span>{{ index + 1 }}</span>
                </div>
                <span class="removeBox" @click="removeDbFile(file)">
                    <van-icon name="cross" />
                </span>
                <!-- <a @click="removeDbFile(file)">
                    <f7-icon f7="multiply_circle_fill" />
                </a> -->
                <div class="gauge demo-gauge" @click="openFile(file, index)"></div>
                <!-- 离线标签 -->
                <div class="offline_tag" v-if="file.reserved1=='offline'">离线</div>
            </span>
            <span v-for="(file, index) in uploadImgList" :key="file.id" :title="file.name" v-show="file.active || file.success">
                <div :class="
                    hasHeightLight(file.id) == true
                        ? 'img-div img-heightLight'
                        : 'img-div'
                ">
                    <img class="img-attachement" :src="getFileThumb(file, true)"
                        @click="openFile(file, dbImgList.length + index)" />
                </div>
                <div v-if="file.code" style="font-size: 12px">{{ file.code }}</div>
                <!-- <a v-if="file.success" @click="removeFile(file, index)">
                    <f7-icon f7="multiply_circle_fill"></f7-icon>
                </a> -->
                <span class="removeBox" v-if="file.success" @click="removeFile(file, index)">
                    <van-icon name="cross" />
                </span>
                <a v-if="file.error" class="col button button-fill color-gray" @click="removeFile(file, index)">{{
                    formatError(file) }}</a>
                <div class="gauge demo-gauge" v-show="file.active">
                    <svg width="50px" height="50px" viewBox="0 0 270 270" class="gauge-svg">
                        <circle stroke="#000000" stroke-width="10" fill="transparent" cx="125" cy="125" r="120"
                            class="gauge-back-circle"></circle>
                        <circle transform="rotate(-90 125 125)" stroke="#ffffff" stroke-width="10"
                            stroke-dasharray="753.9822368615503" :stroke-dashoffset="
                                ((100 - file.progress) / 100) * 753.9822368615503
                            " fill="none" cx="125" cy="125" r="120" class="gauge-front-circle"></circle>
                        <text x="50%" y="50%" font-weight="500" font-size="60" fill="#ffffff" dy="0" text-anchor="middle"
                            dominant-baseline="middle" class="gauge-value-text">
                            {{ Number(file.progress).toFixed(0) }}%
                        </text>
                    </svg>
                </div>
                <div class="img-index" @click="openFile(file, index)" v-if="showIndex == true">
                    <span>{{ index + 1 + dbfiles.length }}</span>
                </div>
                <div class="offline_tag" v-if="showOffline">离线</div>
            </span>
            <file-upload
                :heightLightImg="heightLightImg"
                :ref="uploadId"
                :input-id="uploadId"
                class="addPic"
                :style="'width:' + imgStyle.width + 'px;height:' + imgStyle.height + 'px'"
                :post-action="postUrl"
                :chunk-enabled="chunkEnabled"
                :chunk="{
                    action: chunkUrl,
                    minSize: chunkMinSize * 1048576,
                    maxActive: chunkMaxActive,
                    maxRetries: chunkMaxRetries,
                    finishBody: params,
                    handler: handlerClass,
                }" :headers="{
                    championsoftTokenAuthorization: `championsoft ${$f7.data.authToken}`,
                }"
                :extensions="extensions"
                :accept="accept"
                :isShowFile="actionsOneGroup.includes(3)"
                :multiple="galleryOptions.multiple || false"
                :size="size"
                v-model="files"
                @input-filter="inputFilter"
                @input-file="inputFile"
                :data="params"
                v-show="!isPlus&&acceptCount>(files.length+dbfiles.length)"
            ></file-upload>
            <f7-link class="addPic" :style="
                'width:' + imgStyle.width + 'px;height:' + imgStyle.height + 'px'
            " raised @click="$refs.actionsOneGroup.f7Actions.open()" v-show="isPlus&&acceptCount>(files.length+dbfiles.length)" />
            <f7-actions ref="actionsOneGroup">
                <f7-actions-group>
                    <f7-actions-label>上传方式选择</f7-actions-label>
                    <f7-actions-button v-if="actionsOneGroup.includes(3)" @click="selectFile">选择文件</f7-actions-button>
                    <f7-actions-button @click="appendByGallery" v-if="actionsOneGroup.includes(1)">相册</f7-actions-button>
                    <f7-actions-button @click="appendByCamera" v-if="actionsOneGroup.includes(2)">拍照</f7-actions-button>
                    <f7-actions-button color="red">取消</f7-actions-button>
                </f7-actions-group>
            </f7-actions>
            <div class="file-list" v-if="dbFileList.length>0">
                <div v-for="(file, index) in dbFileList" :key="file.attachmentId" class="file-list-div" :class="
                    hasHeightLight(file.attachmentId) == true ? 'file-heightLight' : ''
                ">
                    <!-- 序号 -->
                    <section @click="openFile(file, index)">
                        <div class="file-index" v-if="showIndex == true">
                            <span>{{ index + 1 }}、</span>
                        </div>
                        <img :src="require(`@/assets/img/file/${fileTypeSrc(file)}.png`)" alt="" />
                        <span class="file-name">{{ file.fileName }}</span>
                    </section>
                    <van-icon name="close" class="remove-icon" @click="removeDbFile(file)"/>
                </div>
            </div>
            <div class="file-list" v-if="uploadFileList.length>0">
                <div v-for="(file, index) in uploadFileList" :key="file.attachmentId" class="file-list-div" :class="
                    hasHeightLight(file.attachmentId) == true ? 'file-heightLight' : ''
                ">
                    <section @click="openFile(file, dbFileList.length + index)">
                        <!-- 序号 --> 
                        <div class="file-index" v-if="showIndex == true">
                            <span>{{ index + 1 }}、</span>
                        </div>
                        <img :src="require(`@/assets/img/file/${fileTypeSrc(file)}.png`)" alt="" />
                        <span class="file-name">{{ file.name }}</span>
                    </section>
                    <van-icon name="close" class="remove-icon" @click="removeFile(file,index)"/>
                    <a v-if="file.error" class="col button button-fill color-gray" @click="removeFile(file, index)">{{
                        formatError(file) }}</a>
                    <div class="gauge demo-gauge" v-show="file.active">
                        <svg width="30px" height="30px" viewBox="0 0 270 270" class="gauge-svg">
                            <circle stroke="#000000" stroke-width="10" fill="transparent" cx="125" cy="125" r="120"
                                class="gauge-back-circle"></circle>
                            <circle transform="rotate(-90 125 125)" stroke="#ffffff" stroke-width="10"
                                stroke-dasharray="753.9822368615503" :stroke-dashoffset="
                                    ((100 - file.progress) / 100) * 753.9822368615503
                                " fill="none" cx="125" cy="125" r="120" class="gauge-front-circle"></circle>
                            <text x="50%" y="50%" font-weight="500" font-size="60" fill="#ffffff" dy="0" text-anchor="middle"
                                dominant-baseline="middle" class="gauge-value-text">
                                {{ Number(file.progress).toFixed(0) }}%
                            </text>
                        </svg>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <!-- new:图片与文件分开展示 -->
            <div class="imgList">
                <span class="legend" v-if="showLegend.show" @click="openLegendFile(showLegend.id)">
                    <img :src="getDownTem(showLegend.id)" alt="">
                    <div>图例</div>
                </span>
                <span v-for="(file, index) in dbImgList" :key="file.attachmentId">
                    <div :class="
                        hasHeightLight(file.attachmentId) == true
                            ? 'img-div img-heightLight'
                            : 'img-div'
                    ">
                        <div class="img-index" v-if="showIndex == true">
                            <span>{{ index + 1 }}</span>
                        </div>
                        <img class="img-attachement" :src="getFileThumb(file)" @click="openDbFile(file, index)" />
                    </div>
                    <div v-if="file.code" style="font-size: 12px">{{ file.code }}</div>
                    <div class="offline_tag" v-if="file.reserved1=='offline'">离线</div>
                </span>
            </div>
            <div class="file-list" v-if="dbFileList.length>0">
                <div v-for="(file, index) in dbFileList" :key="file.attachmentId" class="file-list-div" :class="
                    hasHeightLight(file.attachmentId) == true ? 'file-heightLight' : ''
                " @click="openDbFile(file, index)">
                    <!-- 序号 -->
                    <div class="file-index" v-if="showIndex == true">
                        <span>{{ index + 1 }}、</span>
                    </div>
                    <img :src="require(`@/assets/img/file/${fileTypeSrc(file)}.png`)" alt="" />
                    <span class="file-name">{{ file.fileName }}</span>
                </div>
            </div>
        </template>
    </f7-list>
</template>
<script>
import Util from "@/libs/framework/util";
import ImageCompressor from "image-compressor.js";
import FileUpload from "vue-upload-component";
import formatter from "@/libs/framework/formatter";
import Config from "@/libs/config";
import ChunkUploadHandler from "@/libs/polyfill/ChunkUploadHandler";
import Upload from "@/libs/framework/upload";
export default {
    components: {
        FileUpload,
    },
    props: {
        /** 上传附件时，提交给接口的参数：{
         *  dataKey：业务主键,
         *  bizType：业务类型，
         *  type：附件类型，主要用于校验上传文件的合法性；mobile, picture, office
         * }
         */
        params: {
            type: Object,
            default: ()=>({}),
        },
        dataKey: {
            //对应的工程ID
            type: String,
        },
        extensions: {
            type: String,
            default:'pdf,png,jpg,jpeg,bmp,webp'
        },
        accept: {
            type: String,
            default:'.pdf,.png,.jpg,.jpeg,.bmp,.webp'
        },
        /** 是否允许多选 */
        multiple: {
            type: Boolean,
            default: true,
        },
        /** 允许上传的文件大小 */
        size: {
            type: Number,
            default: 1024 * 1024 * 100,
        },
        chunkUrl: {
            type: String,
            default: Config.api.chunkUploadApi,
        },
        /** 是否显示上传按钮 */
        disabled: {
            type: Boolean,
            default: false,
        },
        // 是否添加时间水印
        timeWatermark: {
            type: Boolean,
            default: false,
        },
        /** 当在for循环里使用此组件时，组件使用者需提供此值，以便区分不同的业务，以防所有项都关联到第一项的组件 */
        uploadId: {
            type: String,
            default: "upload",
        },
        /** 选相册时的参数 */
        galleryOptions: {
            type: Object,
            default: (_) => ({}),
        },
        autoCompress: {
            type: Number,
            default: 300 * 1024,
        },
        /** 是否启用分断上传 */
        chunkEnabled: {
            type: Boolean,
            default: true,
        },
        /** 分片大小 */
        chunkMinSize: {
            type: Number,
            default: 50,
        },
        /** 图片类型 */
        picExtension: {
            type: Array,
            default: () => {
                return ["jpg", "png", "jpeg", "bmp", "webp", "gif"];
            },
        },
        // 上传方式的选择 1相册 2拍照 3文件
        actionsOneGroup: {
            type: Array,
            default: () => [1, 2, 3],
        },
        //是否需要显示序号
        showIndex: {
            type: Boolean,
            default: false,
        },
        imgStyle: {
            type: Object,
            default: () => {
                return { width: 75, height: 75 };
            },
        },
        // getUrl: {
        //     type: String,
        //     default: Config.api.getfilesApi
        // },
        // deleteUrl: {
        //     type: String,
        //     default: Config.api.delFileApi,
        // },
        //高光标志的图片id
        heightLightImg: {
            type: Array,
            default: () => {
                return [];
            },
        },
        //是否需要将上传的pdf转为图片，若是启用了这个 注意修改相关的附件列表查询的地方
        pdfToPic: {
            type: Boolean,
            default: false,
        },
        //是否显示二维码编号
        isCode: {
            type: Boolean,
            default: false,
        },
        //是否不显示成功提示
        showMsg: {
            type: Boolean,
            default: true,
        },
        //二维码数组
        codeList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        defaultFiles: {
            type: Array,
            default: () => {
                return [];
            },
        },
        isDefaultFile:{
            type:Boolean,
            default:false,
        },
        // 是否显示图例
        showLegend:{
            type:Object,
            default:()=>{
                return {
                    show:false,
                }
            }
        },
        showOffline:{
            type:Boolean,
            default:false
        },
        acceptCount:{
            type:Number,
            default:Infinity
        },
        acceptCount:{
            type:Number,
            default:Infinity
        },
    },
    data () {
        return {
            // downUrl: Config.api.download,
            // getUrl: Config.api.getfilesApi,
            // deleteUrl: Config.api.delFileApi,
            // postUrl: null,
            downUrl: "/api/base/fileupload/downFile",
            downThumb: Config.api.downThumb,
            getUrl: "/api/base/fileupload/getFiles",
            deleteUrl: "/api/base/fileupload/delFile",
            postUrl: "/api/base/fileupload/uploadFile",
            files: [],
            dbfiles: [],
            dbImgList: [], // 查看时 的图片数据
            dbFileList: [], // 查看时 的pdf等文件类型的数据
            // 1MB by default
            chunkMaxActive: 3,
            chunkMaxRetries: 5,
            popupOpened: false,
            uploadAuto: true,
            handlerClass: ChunkUploadHandler,
            fileThumbPic: [
                "avi",
                "doc",
                "docx",
                "mp4",
                "pdf",
                "ppt",
                "pptx",
                "rar",
                "txt",
                "xls",
                "xlsx",
                "zip",
            ],
            // 1MB by default
            addresses: "", //定位地址：addresses: "广州市黄浦区萝岗福山循环经济产业园"
            latitude: 23.13,
            longitude: 113.27,
            enginee: {}, //工程
            userRoleName: null, //人员类型
            user: {}, //用户信息
            unwacth: null,
            uploadImgList:[],
            uploadFileList:[],
        };
    },
    mounted () {
        var self = this;
        if (window.plus) {
            this.postUrl = Config.api.upload;
            this.downUrl = Config.api.download;
            // this.deleteUrl = Config.api.deleteUrl;
        }
        // self.postUrl = self.$util.mapProxyOnProd(Config.api.uploadApi);
        // if (self.pdfToPic) {
        //     self.params.pdfToPic = true;
        // } else {
        //     self.params.pdfToPic = false;
        // }
        // self.loadLocation();
    },
    created () {
        var self = this;
        var url = self.getUrl;
        window.enableLog && console.log("created");
        this.uploadImgList=[]
        this.uploadFileList=[]
        this.dbImgList=[]
        this.dbFileList=[]

        // self.$f7.request.post(url, self.params, (r) => {
        //     r = JSON.parse(r);
        //     if (r?.success) {
        //         self.dbfiles = r.parameters.files || [];
        //         if (self.params) {
        //             self.params.sort = self.dbfiles.length + 1;
        //         }
        //         return;
        //     }

        //     self.$framework.$f7.dialog.toast("获取文件失败");
        // });
        // 如果是设置了不请求文件的方法，则使用自己传入的文件列表
        if(this.isDefaultFile){
            this.mapFileList(this.defaultFiles)
        }else{ // 否则请求文件
            // 监听dataKey是否准备完成
            if (this.params.dataKey && this.params.bizType) {
                this.fnInit();
            }
            
            // this.unwacth = this.$watch("params", function (val) {
            //     if (val.dataKey) {
            //         this.fnInit()
            //     }
            // }, {
            //     deep: true,
            //     immediate: true
            // })
        }
        //获取工程基本信息
        // self.getModel();
        // setTimeout(() => {
        //     self.getDistance();
        // }, 4000);
    },
    methods: {
        getImgOrFile(list,imgField,fileField,isUpload){
            // this[imgField] = [];
            // this[fileField] = [];
            let imgType = [".png", ".jpeg", ".jpg", 'bmp'];
            list=JSON.parse(JSON.stringify(list))
            if(list.length==0){
                this[fileField]=[]
                this[imgField]=[]
            }
            list.forEach((item) => {
                if(!item.fileName)item.fileName=item.name
                if(!item.fileType) item.fileType=item.fileName.substring(item.fileName.lastIndexOf("."));
                // 图片类型
                if (imgType.indexOf(item.fileType) != -1) {
                    let findIndex=this[imgField].findIndex(citem=>citem.id==item.id)
                    if(findIndex!=-1){
                        this[imgField].splice(findIndex,1,item);
                    }else{
                        this[imgField].push(item);
                    }
                } else {
                    // 文件类型
                    let findIndex=this[fileField].findIndex(citem=>citem.id==item.id)
                    if(findIndex!=-1){
                        this[fileField].splice(findIndex,1,item);
                    }else{
                        this[fileField].push(item);
                    }
                }
                this.$forceUpdate()
            });
        
            
        },
        getDownTem(id){
            return `${Config.api.download}?attachmentId=${id}`
        },
        fileTypeSrc (item) {
            // 文件类型，用于展示文件类型图片
            let typeList = [
                ".avi",
                ".doc",
                ".docx",
                ".jpeg",
                ".jpg",
                ".pdf",
                ".mp4",
                ".png",
                ".ppt",
                ".pptx",
                ".rar",
                ".txt",
                ".xls",
                ".xlsx",
                ".zip",
            ];
            if(!item.fileName) item.fileName=item.name
            if(!item.fileType) item.fileType=item.fileName.substring(item.fileName.lastIndexOf("."))
            return typeList.indexOf(item.fileType) != -1
                ? item.fileType.substr(1)
                : "default";
        },
        mapFileList(fileList){
            let self=this
            self.dbfiles = fileList || [];
            // 如果禁用状态，即查看状态，需要分图片以及pdf等文件类型的分类
            // if (self.disabled) {
                self.dbImgList = [];
                self.dbFileList = [];
                let imgType = [".png", ".jpeg", ".jpg", 'bmp','.BMP','.JPEG','.PNG','.JPG'];
                fileList.map((item) => {
                    if(!item.fileType) item.fileType=item.fileName.substring(item.fileName.lastIndexOf("."));
                    // 图片类型
                    if (imgType.indexOf(item.fileType) != -1) {
                        self.dbImgList.push(item);
                    } else {
                        // 文件类型
                        self.dbFileList.push(item);
                    }
                    this.$forceUpdate()
                });
            // }
            if (self.params) {
                self.params.sort = self.dbfiles.length + 1;
            }
        },
        fnInit () {
            let self = this;
            let url = self.getUrl;
            // 取消监听
            // if (this.unwacth) this.unwacth();
            self.$f7.request.post(url, self.params, (r) => {
                r = JSON.parse(r);
                if (r?.success) {
                    // self.dbfiles = r.parameters.files || [];
                    // if (self.isCode && self.codeList.length > 0) {
                    //     for (var i = 0; i < self.dbfiles.length; i++) {
                    //         for (var k = 0; k < self.codeList.length; k++) {
                    //             if (
                    //                 self.dbfiles[i].attachmentId == self.codeList[k].attachmentId
                    //             ) {
                    //                 self.dbfiles[i].codeId = self.codeList[k].id;
                    //                 self.dbfiles[i].code = self.codeList[k].digtCode;
                    //             }
                    //         }
                    //     }
                    // }
                    // // 如果禁用状态，即查看状态，需要分图片以及pdf等文件类型的分类
                    // if (self.disabled) {
                    //     self.dbImgList = [];
                    //     self.dbFileList = [];
                    //     let imgType = [".png", ".jpeg", ".jpg"];
                    //     r.parameters.files.map((item) => {
                    //         // 图片类型
                    //         if (imgType.indexOf(item.fileType) != -1) {
                    //             self.dbImgList.push(item);
                    //         } else {
                    //             // 文件类型
                    //             self.dbFileList.push(item);
                    //         }
                    //     });
                    //     if (self.isCode && self.codeList.length > 0) {
                    //         for (var i = 0; i < self.dbImgList.length; i++) {
                    //             for (var k = 0; i < self.codeList.length; k++) {
                    //                 if (
                    //                     self.dbImgList[i].attachmentId ==
                    //                     self.codeList[k].attachmentId
                    //                 ) {
                    //                     self.dbImgList[i].id = self.codeList[k].id;
                    //                     self.dbImgList[i].code = self.codeList[k].digtCode;
                    //                 }
                    //             }
                    //         }
                    //     }
                    // }
                    // if (self.params) {
                    //     self.params.sort = self.dbfiles.length + 1;
                    // }
                    this.mapFileList(r.parameters.files)
                    return;
                }

                self.$framework.$f7.dialog.toast("获取文件失败");
            });
        },
        //是否高光
        hasHeightLight (id) {
            let item = this.heightLightImg.find((i) => {
                return i == id;
            });
            if (item) {
                return true;
            }
            return false;
        },
        getFileThumb (file, isUpload) {
            localStorage.setItem('getFileThumb',JSON.stringify(file))
            let self = this;
            var defaultPic = "static/img/file/default.png";
            var fName = file.fileName;
            if (isUpload) {
                fName = file.name;
            }
            if (!file.fileType && fName) {
                file.fileType = fName.substring(fName.lastIndexOf("."));
            }
            var extension = file.fileType?.replace(".", "");
            if (extension) {
                extension = extension.toLowerCase();
                file.isPic = this.picExtension.includes(extension);
            }

            if (file.isPic === true) {
                if (isUpload) {
                    if(file.response.parameters){
                        return `${this.downThumb}?attachmentId=${file.response.parameters.file.key}`;
                    }else{
                        return file.thumb;
                    }
                }
                if (this.params.bizType === "riskWeeklyReport" && file.fileLocation) {
                    return file.fileLocation;
                }

                return (
                    `${this.downThumb}?attachmentId=${file.attachmentId}` +
                    "&championsoft=" +
                    encodeURIComponent(self.$f7.data.authToken)
                );
            }

            if (this.fileThumbPic.includes(extension)) {
                return `static/img/file/${extension}.png`;
            }

            return defaultPic;
        },
        inputFilter (newFile, oldFile, prevent) {
            var self = this;
            if (self.isCode) {
                newFile.code = "";
            }
            if (newFile && !oldFile) {
                // 添加文件前
                // 过滤系统文件 和隐藏文件
                if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
                    return prevent();
                }
                // 过滤 php html js 文件
                if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
                    return prevent();
                }
                var index = self.dbfiles.length + self.files.length + 1;
                if (self.params) {
                    self.params.sort = index;
                }
                // 自动压缩
                if (
                    newFile.file &&
                    newFile.type.substr(0, 6) === "image/" &&
                    self.autoCompress &&
                    self.autoCompress > 0 &&
                    self.autoCompress < newFile.size
                ) {
                    newFile.error = "compressing";
                    const imageCompressor = new ImageCompressor(null, {
                        convertSize: Infinity,
                        maxWidth: 512,
                        maxHeight: 512,
                    });
                    imageCompressor
                        .compress(newFile.file)
                        .then((file) => {
                            self.$refs[self.uploadId].update(newFile, {
                                error: "",
                                file,
                                size: file.size,
                                type: file.type,
                            });
                        })
                        .catch((err) => {
                            self.$refs[self.uploadId].update(newFile, {
                                error: err.message || "compress",
                            });
                        });
                }
            }
            if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
                // 创建 blob 字段
                newFile.blob = "";
                let URL = window.URL || window.webkitURL;
                if (URL && URL.createObjectURL) {
                    newFile.blob = URL.createObjectURL(newFile.file);
                }
                // 缩略图
                newFile.thumb = "";
                if (newFile.blob && newFile.type.substr(0, 6) === "image/") {
                    newFile.thumb = newFile.blob;
                }
            }
        },
        // add, update, remove File Event
        inputFile (newFile, oldFile) {
            var self = this;
            var index = self.dbfiles.length + self.files.length + 1;
            if (self.params) {
                self.params.sort = index;
            }
            if (newFile && oldFile) {
                // update
                if (self.isCode && newFile.success) {
                    var uuid = Math.uuid();
                    var witnessId = newFile.data.dataKey;
                    var attachmentId = newFile.response.parameters.file.key;
                    self.$f7.request.post(
                        "/quality/concreteWitness/bindQrCodeWitness",
                        { attachmentId: attachmentId, witnessId: witnessId, uuid: uuid },
                        (r) => {
                            r = JSON.parse(r);
                            if (r && r.success) {
                                newFile.code = r.parameters.chipdepot.digtCode;
                                newFile.codeId = r.parameters.chipdepot.id;
                                self.$emit("success", newFile);
                            } else {
                                self.$framework.$f7.dialog.toast(
                                    r.message || "二维码绑定失败,请删除重新上传"
                                );
                            }
                        },
                        (e) => {
                            this.$framework.$f7.dialog.toast("二维码绑定失败,请删除重新上传");
                        }
                    );
                }
                if (newFile.active && !oldFile.active) {
                    // beforeSend
                    // min size
                    if (
                        newFile.size >= 0 &&
                        self.minSize > 0 &&
                        newFile.size < self.minSize
                    ) {
                        self.$refs[self.uploadId].update(newFile, { error: "size" });
                    }
                }
                if (newFile.progress !== oldFile.progress) {
                    // progress
                }
                if (newFile.error && !oldFile.error) {
                    self.$f7.dialog.alert(self.formatError(newFile) || "上传失败");
                }

                if (newFile.success && !oldFile.success && newFile?.response?.parameters?.file) {
                    // success
                    let fs = newFile?.response?.parameters?.file;
                    if (fs.error) {
                        self.$f7.dialog.alert(`${fs[0].message || "上传失败"}`);
                        let ind = self.files.findIndex((f) => {
                            return f.id && f.id == newFile.id;
                        });
                        if (ind != -1) {
                            self.files.splice(ind, 1);
                        }
                    } else {
                        self.$emit("success", newFile);
                        if(self.showMsg){
                            self.$f7.dialog.toast(`文件上传成功`);
                        }
                        self.$emit("onSuccess", fs);
                    }
                }

                if (
                    newFile.response &&
                    newFile.response.success === false &&
                    newFile.active == false
                ) {
                    self.$f7.dialog.toast(`${newFile.response.message || "上传失败"}`);
                    let ind = self.files.findIndex((f) => {
                        return f.id && f.id == newFile.id;
                    });
                    if (ind != -1) {
                        setTimeout(() => {
                            self.files.splice(ind, 1);
                        }, 10);
                    }
                }
            }
            if (!newFile && oldFile) {
                // remove
                if (oldFile.success && oldFile.response.id) {
                }
            }
            // Automatically activate upload
            if (
                Boolean(newFile) !== Boolean(oldFile) ||
                oldFile.error !== newFile.error
            ) {
                if (self.uploadAuto && !self.$refs[self.uploadId].active) {
                    self.$refs[self.uploadId].active = true;
                }
            }
        },
        appendByCamera () {
            let self = this;
            var cmr = window.plus.camera.getCamera();
            if (!self.addresses) {
                // self.loadLocation();
            }
            //设置像素
            var res = cmr.supportedVideoResolutions[0];
            let server = Config.server + "/mobileApi/risk/riskAttachment/upload";
            cmr.captureImage(
                function (p) {
                    window.plus.io.resolveLocalFileSystemURL(
                        p,
                        function (entry) {
                            localStorage.setItem('appendByCameraentry',JSON.stringify(entry))
                            self.compressImage(
                                entry.toLocalURL(),
                                entry.name,
                                function (zip) {
                                    //删除压缩前的图片
                                    Upload.deleteTmpFile(entry.fullPath);
                                    // self.fnTimeWatermark(zip.target, server, null);
                                }
                            );
                        },
                        function (e) {
                            // self.$framework.$f7.dialog.toast(
                            //   "读取拍照文件错误：" + e.message
                            // );
                            //   console.log("读取拍照文件错误：" + e.message);
                        }
                    );
                },
                function (e) {
                    if (e.code == 12 || e.code == 11) {
                        self.$framework.$f7.dialog.toast("用户取消拍照");
                    } else {
                        self.$framework.$f7.dialog.toast("拍照失败：" + e.message);
                    }
                },
                {
                    // filename: filename,
                    // index: 1
                    filter: "image",
                    resolution: res,
                    format: ".jpg",
                }
            );
        },
        //压缩图片
        compressImage (url, filename, successCallback) {
            let self = this;
            var name = "_doc/image/" + filename;
            window.plus.zip.compressImage(
                {
                    src: url, //src: (String 类型 )压缩转换原始图片的路径
                    dst: name, //压缩转换目标图片的路径
                    quality: 80, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
                    width: "800px",
                    overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
                },
                function (zip) {
                    //页面显示图片
                    successCallback(zip);
                },
                function (error) {
                    window.plus.nativeUI.toast("压缩图片失败，请稍候再试");
                }
            );
        },
        getModel () {
            let self = this;
            self.$f7.request.post(
                "/mobileApi/jafk/risk/riskAttachment/getModel",
                { dataKey: self.dataKey },
                (r) => {
                    r = JSON.parse(r);
                    if (r.success == true) {
                        self.enginee = r.parameters.enginee;
                        self.userRoleName = r.parameters.userRoleName;
                        self.user = r.parameters.user;
                    } else {
                        self.$f7.dialog.alert("获取基本信息出错：" + r.message);
                    }
                }
            );
        },
        //获取地址
        loadLocation () {
            let self = this;
            self.$util.getCurrentPosition(
                (pos) => {
                    //   console.log(`定位 --> ${JSON.stringify(pos)}`);
                    self.addresses = pos.addresses;
                    self.latitude = pos.coords.latitude;
                    self.longitude = pos.coords.longitude;
                },
                (error) => {
                    self.$f7.dialog.toast("获取定位失败,请确认是否授权定位功能");
                }
            );
            setTimeout(() => {
                self.getDistance();
            }, 1000);
        },
        getDistance () {
            if (window.env != "plus") {
                return;
            }
            // var self = this;
            // var pt1 = new window.plus.maps.Point(self.longitude, self.latitude);
            // // self.$f7.dialog.toast("距离" + self.longitude);
            // var pt2 = new window.plus.maps.Point(self.enginee.lng, self.enginee.lat);
            // window.plus.maps.Map.calculateDistance(
            //   pt1,
            //   pt2,
            //   function (event) {
            //     // var distance = event.distance;
            //     // console.log("距离", distance);
            //     // self.$f7.dialog.toast("距离" + distance);
            //     //1公里內显示为工程地址
            //     if (event.distance <= 1000) {
            //       self.addresses = self.enginee.engineeAddress;
            //     }
            //     // self.$f7.dialog.toast("距离" + event.distance);
            //   },
            //   function (e) {
            //     self.$f7.dialog.toast("距离获取失败" + JSON.stringify(e));
            //   }
            // );
        },
        /** 从相册添加文件 */
        appendByGallery () {
            var self = this;
            var galleryOptions = undefined;
            var options = self.galleryOptions;
            if (options) {
                galleryOptions = {};
                if (typeof options.multiple == "boolean") {
                    galleryOptions.multiple = options.multiple;
                    if (options.multiple === true) {
                        if (options.maximum) {
                            galleryOptions.maximum = options.maximum;
                        }
                    }
                }

                galleryOptions.filter = "image";
                if (options.filter) {
                    galleryOptions.filter = options.filter;
                }

                if (galleryOptions.maximum) {
                    if (galleryOptions.maximum < 1) {
                        galleryOptions.maximum = 1;
                    }
                }
            }

            window.plus.gallery.pick(
                (data) => {
                    if (data.files) {
                        for (var i in data.files) {
                            this.appendToFiles(data.files[i]);
                        }

                        return;
                    }

                    this.appendToFiles(data);
                },
                (e) => {
                    if (e.code == 12 || e.code == 11) {
                        self.$framework.$f7.dialog.toast("取消选择");
                    } else {
                        self.$framework.$f7.dialog.toast("添加文件失败：" + e.message);
                    }
                    console.error("plus.gallery.pick", e);
                },
                galleryOptions
            );
        },
        appendToFiles (path) {
            let self = this;
            var index = self.files.length;
            window.plus.io.resolveLocalFileSystemURL(
                path,
                (entry) => {
                    localStorage.setItem('appendToFilesentry',JSON.stringify(entry))
                    entry.file((file) => {
                        var reader = new window.plus.io.FileReader();
                        reader.onloadend = (e) => {
                            var file = ((path, name) => {
                                var arr = path.split(","),
                                    mime = arr[0].match(/:(.*?);/)[1],
                                    bstr = atob(arr[1]),
                                    n = bstr.length,
                                    u8arr = new Uint8Array(n);
                                while (n--) {
                                    u8arr[n] = bstr.charCodeAt(n);
                                }
                                return new File([u8arr], name, { type: mime });
                            })(e.target.result, entry.name);
                            index++;
                            self.params.sort = index;
                            self.$refs[self.uploadId].add(file);
                        };
                        reader.readAsDataURL(file);
                    });
                },
                (e) => {
                    console.error("appendToFiles error", e);
                }
            );
        },
        /** 添加时间水印 */
        fnTimeWatermark (path, server, reserved3) {
            let self = this;
            window.plus.io.resolveLocalFileSystemURL(
                path,
                (entry) => {
                    entry.file((file) => {
                        // console.log(server);
                        self.createUpload(
                            file.fullPath,
                            self.params,
                            server,
                            reserved3,
                            function (r) {
                                r = JSON.parse(r);
                                self.dbfiles.push({
                                    attachmentId: r.attachmentId,
                                    fileName: r.fileName,
                                    reserved3: reserved3,
                                });
                            }
                        );
                    });
                },
                (e) => {
                    self.$framework.$f7.dialog.toast("上传失败：" + e);
                }
            );
        },
        createUpload (fullPath, params, server, reserved3, sussess) {
            if (fullPath && 0 != fullPath.indexOf("file://")) {
                fullPath = "file://" + fullPath;
            }
            let self = this;
            let wt = window.plus.nativeUI.showWaiting();
            // let server = Config.server + "/mobileApi/risk/riskAttachment/upload";
            let task = window.plus.uploader.createUpload(
                server,
                { method: "POST" },
                function (t, status) {
                    wt.close();
                    //上传完成
                    if (status == 200) {
                        if (t.responseText == "") {
                            return;
                        }
                        // TODO 可能有问题
                        // console.log("上传成功：" + t.responseText);
                        // 删除临时文件
                        Upload.deleteTmpFile(fullPath);
                        if (sussess) {
                            sussess(t.responseText);
                        }
                    } else {
                        self.$framework.$f7.dialog.alert("上传失败,请检查网络！");
                        // 删除临时文件
                        Upload.deleteTmpFile(fullPath);
                    }
                }
            );
            //   console.log(params);
            task.addData("type", params.type);
            task.addData("bizType", params.bizType);
            task.addData("dataKey", params.dataKey);
            task.addData("engineeId", self.dataKey); //云相册对应工程
            task.addData("reserved1", params.reserved1);
            task.addData("address", self.addresses);
            task.addData("reserved2", params.reserved2);

            // 临时解决cookie失效问题
            task.addData("uploaderId", vue.$f7.data.currentUser.userId);
            task.addData("uploaderName", vue.$f7.data.currentUser.userName);
            task.addData("roleName", self.userRoleName);
            task.addData("text", reserved3);
            task.addData("reserved3", reserved3);
            if (self.user) {
                task.addData("departmentId", self.user.departmentId);
            }
            task.addFile(fullPath, { key: "file" });
            task.start();
        },
        removeDbFile (file) {
            var self = this;
            let attachmentId = file.attachmentId;
            if (!attachmentId) {
                self.dbfiles.splice(self.files.indexOf(file), 1);
                return;
            }
            self.$f7.dialog.confirm("该文件已上传成功，确定要删除吗？", (r) => {
                if (!r) {
                    return;
                }
                self.$f7.preloader.show();
                self.$f7.request.post(
                    self.deleteUrl,
                    { attachmentId: attachmentId, pdfToPic: self.pdfToPic },
                    (r) => {
                        r = JSON.parse(r);
                        self.$f7.preloader.hide();
                        if (r && r.success) {
                            let index = self.dbfiles.indexOf(file);
                            self.dbfiles.splice(index, 1);
                            self.dbImgList.splice(self.dbImgList.indexOf(file), 1);
                            self.dbFileList.splice(self.dbFileList.indexOf(file), 1);
                            self.$framework.$f7.dialog.toast("文件删除成功");
                            self.$emit("deleteFileAfter", index, file.attachmentId);
                        } else {
                            self.$framework.$f7.dialog.toast(r.message || "文件删除失败");
                        }
                    },
                    (e) => {
                        self.$f7.preloader.hide();
                        self.$framework.$f7.dialog.toast("文件删除失败");
                    }
                );
            });
        },
        removeFile (file, index,noMsg=false) {
            var self = this;
            if (!file.response.parameters.file) {
                self.$refs[self.uploadId].remove(file);
                return;
            }
            
            let attachmentId = file.response.parameters.file.key;
            if(noMsg){
                self.$f7.request.post(
                    self.deleteUrl,
                    {
                        attachmentId:
                            attachmentId || (file.chunk ? file.chunk.sessionId : ""),
                        pdfToPic: self.pdfToPic,
                    },
                    (r) => {
                        r = JSON.parse(r);
                        self.$f7.preloader.hide();
                        if (r && r.success) {
                            if (attachmentId == undefined) {
                                self.$refs[self.uploadId].remove(file);
                            } else {
                                self.files.splice(self.files.findIndex(item=>item.id==file.id), 1);
                                self.uploadImgList=[]
                                self.uploadFileList=[]
                            }
                        } else {
                            self.$framework.$f7.dialog.toast(r.message || "文件删除失败");
                        }
                    },
                    (e) => {
                        self.$f7.preloader.hide();
                        self.$framework.$f7.dialog.toast("文件删除失败");
                    }
                );
            }else{
                if (file.success || attachmentId != undefined) {
                    self.$f7.dialog.confirm("该文件已上传成功，确定要删除吗？", (r) => {
                        if (r) {
                            self.$f7.preloader.show();
                            self.$f7.request.post(
                                self.deleteUrl,
                                {
                                    attachmentId:
                                        attachmentId || (file.chunk ? file.chunk.sessionId : ""),
                                    pdfToPic: self.pdfToPic,
                                },
                                (r) => {
                                    r = JSON.parse(r);
                                    self.$f7.preloader.hide();
                                    if (r && r.success) {
                                        if (attachmentId == undefined) {
                                            self.$refs[self.uploadId].remove(file);
                                        } else {
                                            self.files.splice(self.files.findIndex(item=>item.id==file.id), 1);
                                            self.uploadImgList=[]
                                            self.uploadFileList=[]
                                            self.$emit("deleteFileAfter", self.files.findIndex(item=>item.id==file.id), attachmentId);
                                        }
                                        self.$framework.$f7.dialog.toast("文件删除成功");
                                    } else {
                                        self.$framework.$f7.dialog.toast(r.message || "文件删除失败");
                                    }
                                },
                                (e) => {
                                    self.$f7.preloader.hide();
                                    self.$framework.$f7.dialog.toast("文件删除失败");
                                }
                            );
                        }
                    });
                } else {
                    self.$refs[self.uploadId].remove(file);
                }
            }
        },
        openFile (file, index) {
            localStorage.setItem('openFile',JSON.stringify(file))
            let fileName = "";
            let attachmentId = "";
            if (file.attachmentId) {
                fileName = file.fileName;
                attachmentId = file.attachmentId;
            } else {
                fileName = file.response.parameters.file.name;
                attachmentId = file.response.parameters.file.key
            }
            let params = {
                filename: fileName,
                downloadurl: `${this.downUrl}?attachmentId=${attachmentId}`,
            };
            if (file.fileType && file.fileType == ".mp4") {
                window.location.href = `${this.downUrl}?attachmentId=${attachmentId}`;
            } else {
                this.handleViewFile(file, index, params)
            }
        },
        openDbFile (file,index) {
            let params = {
                filename: file.fileName,
                downloadurl: `${this.downUrl}?attachmentId=${file.attachmentId}`,
            };
            if (file.fileType && file.fileType == ".mp4") {
                if (file.attachmentId) {
                    window.location.href = `${this.downUrl}?attachmentId=${file.attachmentId}`;
                } else {
                    window.location.href = `${this.downUrl}?attachmentId=${file.response.parameters.file.key}`;
                }
            } else {
                this.handleViewFile(file, index, params)
            }
        },
        openLegendFile(attachmentId){
            let self=this
            let url= self.downUrl + "?attachmentId=" + attachmentId;
            let fileName='图例.png'
            if(!window.qmSdk){
                let photos=[{
                    url: this.getDownTem(attachmentId),
                    caption: fileName,
                    attachmentId
                }]
                let photoBrowser = self.$f7.photoBrowser.create({
                    photos: photos,
                    type: "popup",
                    popupCloseLinkText: "关闭",
                });
                photoBrowser.open(0);
                photoBrowser.on("closed", () => {
                    photoBrowser.destroy();
                });
            }else{
                let params={
                    filename: fileName,
                    downloadurl: this.getDownTem(attachmentId),
                }
                window.qmSdk.scanFile(params);
            }
        },
        handleViewFile(file, index,params){
            var self = this;
            localStorage.setItem('handleViewFileparams',JSON.stringify(params))
            localStorage.setItem('selffiles',JSON.stringify(self.files))
            if(!window.qmSdk){
                let photos = [];
                let url = "";
                let fileName = "";
                let attachmentId = "";
                if (file.attachmentId) {
                    fileName = file.fileName;
                    attachmentId = file.attachmentId;
                } else {
                    fileName = file.response.parameters.file.name;
                    attachmentId = file.response.parameters.file.key
                }
                if (!file.isPic) {
                        url = self.downUrl + "?attachmentId=" + attachmentId;
                        self.$f7.request.post(Config.api.download, { attachmentId: attachmentId }, (r) => {
                            if (!r) {
                                self.$f7.dialog.alert("文件不存在");
                            } else {
                                var options = { askRedownload: false };
                                self.$f7.dialog.preloader("正在下载，请稍后");
                                self.$util.downloadFile(
                                    fileName,
                                    attachmentId,
                                    self,
                                    url,
                                    true,
                                    options
                                );
                                // location.href = url;
                                setTimeout(function () {
                                    self.$f7.dialog.close();
                                }, 1000);
                            }
                        }
                        );
                } else {
                    self.dbImgList.forEach((f) => {
                        if (f.isPic) {
                            photos.push({
                                url: f.fileLocation ? f.fileLocation : self.downUrl + "?attachmentId=" + f.attachmentId + '&championsoft=' + encodeURIComponent(self.$f7.data.authToken),
                                caption: f.fileName,
                                attachmentId: f.attachmentId
                            });
                        }
                    });
                    self.uploadImgList.forEach((f) => {
                        // if (f.isPic && f.thumb) {
                        if (f.isPic) {
                            photos.push({
                                // url: f.thumb,
                                url: self.downUrl + "?attachmentId=" + (f.attachmentId ? f.attachmentId : f.response.parameters.file.key) + '&championsoft=' + encodeURIComponent(self.$f7.data.authToken),
                                caption: f.name,
                                attachmentId: f.attachmentId ? f.attachmentId : f.response.parameters.file.key
                            });
                        }
                    });
                    var photoIndex = photos.indexOf(photos.find((v) => v.attachmentId == (file.attachmentId ? file.attachmentId : file.response.parameters.file.key)));
                    if (photoIndex != null && photoIndex != -1) {
                        index = photoIndex;
                    }
                    if (photos.length !== 0) {
                        var photoBrowser = self.$f7.photoBrowser.create({
                            photos: photos,
                            type: "popup",
                            popupCloseLinkText: "关闭",
                        });
                        photoBrowser.open(index || 0);
                        photoBrowser.on("closed", () => {
                            photoBrowser.destroy();
                        });
                        // photoBrowser.on("opened", () => {
                        //     self.$f7
                        //         .$(".photo-browser .toolbar")
                        //         .append('<div class="photo-download"><a>保存到相册</a></div>');
                        // });
                        // setTimeout(function () {
                        //     let fileData = null;
                        //     self.$f7.$(".photo-download a").on("click", r => {
                        //         for (var i = 0; i < photos.length; i++) {
                        //             if (i == photoBrowser.swiper.activeIndex) {
                        //                 fileData = photos[i];
                        //             }
                        //         }
                        //         self.saveImage(fileData);
                        //     });
                        // }, 1000);
                    }
                }
            }else{
                window.qmSdk.scanFile(params);
            }
        },
        saveImage (fileData) {
            if (!fileData || window.env != "plus") {
                return false;
            }
            let self = this;
            self.$util.downloaderPhoto(fileData.url, self, fileData.caption);
        },
        openUpload () {
            var self = this;
            if (self.isPlus) {
                self.$refs.actionsOneGroup.f7Actions.open();
                return;
            }
            self.selectFile();
        },
        selectFile () {
            this.$refs[this.uploadId].$$(`label[for='${this.uploadId}']`).click();
        },
        mapProxyOnProd (url) {
            return Util.mapProxyOnProd(url);
        },
        getUploadedCount () {
            var self = this;
            return self.files.length + self.dbfiles.length;
        },
        formatError (file) {
            var self = this;
            var error = "上传失败";
            switch (file.error) {
                case "size":
                    error =
                        "上传失败：文件太大，不超过" + formatter.formatFileSize(self.size);
                    break;
                case "extension":
                    error = "上传失败：文件类型不符，只允许" + self.accept;
                    break;
                case "timeout":
                    error = "网络超时";
                    break;
                case "abort":
                    error = "用户放弃";
                    break;
                case "network":
                    error = "网络连接失败";
                    break;
                case "server":
                    error = "服务器错误";
                    break;
                case "denied":
                    error = "请求无效";
                    break;
                default:
                    error = "上传失败";
                    break;
            }
            return error;
        },
    },
    computed: {
        isPlus () {
            return window.env == "plus";
        },
    },
    watch:{
        files:{
            handler(val,oldVal){
                let fileVal=JSON.parse(JSON.stringify(val))
                // fileVal=fileVal.filter(item=>item.success)
                this.getImgOrFile(fileVal,'uploadImgList','uploadFileList',true)
            },
            immediate:true,
            deep:true
        },
        // dbfiles:{
        //     handler(val){
        //         this.getImgOrFile(val,'dbImgList','dbFileList')
        //     },
        //     immediate:true,
        //     deep:true
        // }
    },
};
</script>

<style lang="less" scoped>
@deep: ~">>>";

.chunk-loading {
    margin: -12px;
    display: flex;
    width: calc(100% + 24px);

    .chunk-loading-part {
        height: 25px;
        line-height: 25px;
        flex: 1;
        background: #ccc;
        font-size: 14px;
        color: white;
        text-align: center;
    }
}

.chunk-loading .chunk-loading-part.chunk-loading-part__uploaded {
    background: #28a745;
}

.file-uploads {
    width: 80px;
}

.addPic {
    display: inline-block;
    // width: 75px;
    // height: 75px;
    border-radius: 3px;
    background: #f8f8f8 url(../../../../assets/img/icon-plus.png) no-repeat center;
    background-size: cover;
    margin-left: 8px;
    cursor: pointer;
}

.pic_upload {
    width: 100%;
    box-sizing: border-box;
}

.pic_upload span {
    display: inline-block;
    text-align: center;
    position: relative;
    .offline_tag{
        font-size: 12px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        background: #00000052;
        color: #fff;
    }
}
.pic_upload{
    .legend{
        margin: 0 5px 5px 5px;
        vertical-align: top;
        img{
            width: 75px;
            height: 75px;
        }
        div{
            font-size: 12px;
        }
    }
}

.pic_upload span div.img-div {
    width: 75px;
    height: 75px;
    // border: 1px solid #e5e5e5;
    margin: 0 auto;
}

.pic_upload span a {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 100;
    color: #848484;
}

.pic_upload .demo-gauge {
    top: 5%;
    position: absolute;
    left: 90%;
    margin-left: -40px;
}

.f7-icons {
    font-size: 22px;
}

.img-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-attachement {
    width: 100% !important;
    height: 100% !important;
    // object-fit: contain;
}

.img-index {
    text-align: center;
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 5px;
}

.img-index span {
    background: #ed818e;
    width: 25px;
    opacity: 0.7;
    color: white;
    border-radius: 50%;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
}

.img-heightLight {
    border: 2px solid #08f5e8 !important;
}

.file-heightLight {
    background: #f4f7fa;
}

.file-list {
    display: flex;
    flex-direction: column;
    margin: 15px 5px;

    &-div {
        display: flex;
        align-items: center;
        color: #0f1826;
        margin-bottom: 12px;
        position: relative;

        &:last-child {
            margin-bottom: 0;
        }

        img {
            width: 35px;
            height: 35px;
            margin-right: 10px;
        }

        .file-name {
            flex: 1;
            text-align: left;
            word-break: break-all;
        }
        section{
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
        }
        .remove-icon{
            flex-shrink: 0;
        }
        .demo-gauge{
            top: 9%;
            position: absolute;
            left: 1%;
            margin-left: 0;
        }
    }
}
.removeBox{
    position: absolute!important;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    line-height: 16px;
    height: 18px;
    width: 18px;
    border-bottom-left-radius: 5px;
    background: rgba(0, 0, 0, 0.4);
    /deep/ .van-icon{
        margin: 0;
        padding: 0;
        font-size: 12px;
        color: #fff;
    }
}
</style>
